<template>
	<view class="content">

		<!-- <image class="bj" src="@/static/activity/health/bj.png" alt=""></image> -->
		<view class="bj"></view>

		<view style="position: relative;">

			<view class="leixing">
				<scroll-view :scroll-x="true" class="scrollview-box" @scroll="scroll" :scroll-left="scrollLeft2">
					<block v-for="(item, idx) in peizhi" :key="item.id">
						<view class="item">
							<view :class="pick_name==item.name?'yes':'no'" @tap="leixing(item)">
								{{item.name}}
							</view>
						</view>
					</block>
				</scroll-view>
			</view>

			<view style="border-bottom: 1px solid black; margin-top: 80rpx;"></view>

			<view v-for="(item, idx) in list" style="margin-top: 80rpx; margin-bottom: 80rpx;">
				<view v-if="idx <= 0">
					<u-parse :content="item.content" :imageProp='imageProp' />
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import uParse from '@/components/u-parse/u-parse.vue'
	export default {
		components: {
			uParse
		},
		data() {
			return {
				peizhi: [],
				pick_name: '',
				list: [],
				changdu: '',
				imageProp: {
					mode: 'widthFix',
					padding: 20,
					lazyLoad: false,
					window: '100%'
				},
				scrollLeft2: null,
			}
		},
		onLoad() {
			uni.showLoading({
				title: '请稍后...'
			});
			this.data_list();
		},
		methods: {
			scroll(e) {
				this.scrollLeft = e.detail.scrollLeft
			},
			data_list() {
				var self = this
				self.$boya.Request({
					url: '/activity/article',
					data: {
						type: 20,
					}
				}, function(res) {
					let data = res.data.data
					// console.log('data: ', res.data.data);
					for (var i = 0; i < data.length; i++) {
						if (data[i].id == 164) {
							self.peizhi = []
							let children = data[i].children
							for (var j = 0; j < children.length; j++) {
								self.peizhi.push(children[j])
								let init = children[j].init_index
								self.list = children[0].init_index
							}
							self.pick_name = self.peizhi[0].name
							console.log("self.pick_name: ", self.pick_name);

							self.changdu = self.list.length
							console.log("self.changdu: ", self.changdu);
							uni.hideLoading();
							self.list.reverse();
							console.log('list: ', self.list);
						}
					}
				}, false)
			},
			leixing(item) {
				this.pick_name = item.name
				this.list = item.init_index.reverse()
				console.log('this.list: ', this.list);
			},
			zhou(index) {
				if (index == 0) {
					if (this.list.length > 1) {
						this.list.splice(0, 1)
						// console.log(this.list);
					} else {
						this.$common.msg('无上一周食谱')
					}
				} else if (index == 1) {
					if (this.list.length == this.changdu) {
						this.$common.msg('已是最新一周食谱')
					} else {
						this.data_list()
					}
				}
			}
		}
	}
</script>

<style>
	@import url("@/components/u-parse/u-parse.css");

	.bj {
		position: fixed;
		z-index: 0;
		width: 100vw;
		min-height: 100vh;
		background: linear-gradient(to bottom, #D4EAA4, #A5D63F);
	}

	/* .bj {
		position: fixed;
		z-index: 0;
		width: 100vw;
		height: 100vh;
	} */

	.scrollview-box {
		/* 滚动必须加的属性 */
		white-space: nowrap;
		width: 100%;
		padding: 0 20rpx 20rpx 20rpx;
	}

	.item {
		margin-top: 30rpx;
		margin-right: 40rpx;
		/* item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可 */
		display: inline-flex;
		flex-direction: column;
		align-items: center;
	}

	.yes {
		padding: 20rpx;
		/* width: 230rpx; */
		color: white;
		font-size: 30rpx;
		text-align: center;
		border-radius: 20rpx;
		background-color: #F78D1C;
		box-shadow: 0 5rpx 5rpx 1rpx #BEBFBF;
	}

	.no {
		padding: 20rpx;
		/* width: 230rpx; */
		color: #F78D1C;
		font-size: 30rpx;
		text-align: center;
		border-radius: 20rpx;
		background-color: white;
		box-shadow: 0 5rpx 5rpx 1rpx #BEBFBF;
	}

	.dianji {
		display: flex;
		padding: 20rpx 0 20rpx 0;
		background-color: white;
	}

	.dianji>button {
		width: 200rpx;
		height: 60rpx;
		line-height: 58rpx;
		background-color: #D4EAA4;
		border: 1px solid #A5D63F;
	}

	.hui {
		display: none;
	}
</style>